<!-- 向左滑块展示组件 -->

<!-- 可传递属性 -->
<!-- ifShow:是否隐藏此组件  true 展示   false  隐藏  默认true
         leftTitle:左侧内容
         onlyLogo:接收  领取  点击函数所需要的  id 等唯一标识
         indexs:接收数组中的 index 位置信息
         pvuvName:pvuv 埋点信息 （父组件的名称） -->
<!-- 需配套的函数 -->
<!-- byDefaults：设为默认的函数 传递  onlyLogo唯一标识   indexs位置信息   pvuvName埋点信息
         compingReomove:删除的函数 传递  onlyLogo唯一标识   indexs位置信息   pvuvName埋点信息 -->
<template>
  <div class="leftSlide" v-if="ifShow && ifShowing" ref="slide">
    <!-- 包含的滑动容器 -->
    <div class="leftSlide-slide">
      <!-- 左侧最大的部分 -->
      <div class="leftSlide-slide-left">
	  <slot name="slideLeft"></slot>
	  {{ leftTitle }}</div>

      <!-- 右侧小部分 -->
      <div class="leftSlide-slide-right" ref="slideRight">
        <!-- <div class="leftSlide-slide-right-one" @click="byDefault">设为默认</div> -->
        <div class="leftSlide-slide-right-two" @click="compReomove">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 传递功能
    // ---------------------------------------------------------------------
    // 是否隐藏此组件  true 展示   false  隐藏  默认true
    ifShow: {
      type: [Boolean],
      default: true,
    },

    // 传递内容
    // ---------------------------------------------------------------------
    // 左侧内容
    leftTitle: {
      type: [String],
      default: "",
    },

    // 接收  领取  点击函数所需要的  id 等唯一标识
    onlyLogo: {
      type: [String, Number],
      default: "",
    },

    // 接收数组中的 index 位置信息
    indexs: {
      type: [String, Number],
      default: "",
    },

    // pvuv 埋点信息 （父组件的名称）
    pvuvName: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {
      ifShowing: true,
    };
  },
  methods: {
    // 设为默认的函数 传递  onlyLogo唯一标识   indexs位置信息   pvuvName埋点信息
    byDefault() {
      this.$emit("byDefaults", {
        onlyLogo: this.ononlyLogo,
        indexs: this.indexs,
        pvuvName: this.pvuvName,
      });
    },

    // 删除的函数 传递  onlyLogo唯一标识   indexs位置信息   pvuvName埋点信息
    compReomove() {
      this.$emit("compingReomove", {
        onlyLogo: this.ononlyLogo,
        indexs: this.indexs,
        pvuvName: this.pvuvName,
      });
      //   隐藏该组件
      this.ifShowing = false;
    },
  },
};
</script>

<style>
/* 外层样式 */
/* ------------------------------------------------------------------ */
.leftSlide {
  width:100%;
  height:100%;
  overflow: scroll;
}

/* 用于隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 内部滑动容器 */
/* ------------------------------------------------------------------ */
.leftSlide-slide {
  display: flex;
  height: 100%;
}
/* 内部最大的容器 */
.leftSlide-slide-left {
  width: 693rpx;
  height: 100%;
  flex-shrink: 0;
}

/* 右侧容器 */
/* ------------------------------------------------------------------ */
.leftSlide-slide-right {
  display: flex;
  width: 144rpx;
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  background: #ff411f;
  flex-shrink: 0;
}
/* 设置为默认 */
.leftSlide-slide-right-one {
  width: 50%;
  border-right: solid 1px;
}
/* 删除 */
.leftSlide-slide-right-two {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
